<template>
    <div class="ichart-box">
        <div class="ichart-box-item" v-loading="loadingPicOne">
            <div class="item-box-title">客户签约状态统计</div>
            <div id="ichart" class="ichart"></div>
        </div>
        <div class="ichart-box-item" v-loading="loadingPicTwo">
            <div class="item-box-title">客户级别统计</div>
            <div id="ichart2" class="ichart"></div>
        </div>
    </div>
</template>

<script>
import {
    clientDataBoardContractStatus,
    clientDataBoardLevel,
} from "@/api/customer/customerIndex";
import * as echarts from 'echarts';
export default {
    name: 'GovSuperviseAdminTabularData',
    props: {
        ichartName: {
            type: String,
            required: false,
        }
    },
    data() {
        return {
            loadingPicOne: false,
            loadingPicTwo: false,
            myChart: '',
            myChart2: '',
            dataList: {
                contractStatusList: [], //客户签约状态统计
                levelList: [],////客户级别统计

            }, //数据列表
        };
    },
    created() {
        this.getClientDataBoardContractStatus() //客户签约状态统计
        this.getClientDataBoardLevel() //客户级别统计
    },
    mounted() { },
    methods: {
        //客户签约状态统计
        getClientDataBoardContractStatus() {
            this.loadingPicOne = true
            //用户数量和商家数量
            clientDataBoardContractStatus().then((res) => {
                setTimeout(() => {
                    let result = res.result
                    this.dataList.contractStatusList = result
                    this.loadingPicOne = false
                    this.initChart()
                }, 500)
            }).catch(error => {
                this.loadingPicOne = false
            })
        },
        //客户级别统计
        getClientDataBoardLevel() {
            this.loadingPicTwo = true
            //用户数量和商家数量
            clientDataBoardLevel().then((res) => {
                setTimeout(() => {
                    let result = res.result
                    this.dataList.levelList = result
                    this.loadingPicTwo = false
                    this.initChart2()
                }, 500)
            }).catch(error => {
                this.loadingPicTwo = false
            })
        },
        //换算方法
        nowSize(val, initWidth = 1920) {
            let nowClientWidth = document.documentElement.clientWidth;
            return val * (nowClientWidth / initWidth);
        },
        // getDataList(data) { //获取areaId
        //     this.dataList = data
        //     this.initChart()
        //     this.initChart2()
        // },
        domIsExistence(name) {
            if (name != null && name != "" && name != undefined) {
                name.dispose(); //解决echarts dom已经加载的报错
            }
        },
        // 交易数据汇总订单金额明细
        initChart() {
            var _this = this
            this.domIsExistence(this.myChart)
            this.myChart = echarts.init(document.getElementById('ichart'));
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        let str = params.name + '：' + params.value + '家';
                        return str
                    }
                },
                color: ['#078FF9', '#FF745A'],
                legend: {
                    selectedMode: false,
                    top: 'center',
                    right: '5%',
                    orient: 'vertical',
                    itemGap: this.nowSize(15),
                    itemWidth: this.nowSize(12),
                    itemHeight: this.nowSize(5),
                    lineHeight: this.nowSize(19),
                    formatter: function (name) {
                        let datas = _this.dataList.contractStatusList
                        let values = ''
                        let ratio = ''
                        for (let i = 0, l = datas.length; i < l; i++) {
                            if (datas[i].name == name) {
                                ratio = datas[i].ratio;
                                values = datas[i].value;
                            }
                        }
                        return '{oneone|' + name + '}' + ' ' + '{threethree|' + values + '家}' + ' ' + '{twotwo|' + ratio + '%}';
                    },
                    textStyle: {
                        color: '#576276',
                        fontWeight: '400',
                        fontSize: this.nowSize(14),
                        padding: [0, 0, 0, this.nowSize(5)],
                        rich: {
                            // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
                            oneone: {
                                width: this.nowSize(80),
                                fontSize: this.nowSize(14),
                            },
                            twotwo: {
                                width: this.nowSize(50),
                                fontSize: this.nowSize(14),
                            },
                            threethree: {
                                width: this.nowSize(50),
                                fontSize: this.nowSize(14),
                            },
                        },
                    },
                },
                series: [{
                    // name: 'Access From',
                    type: 'pie',
                    radius: ['35%', '65%'],
                    center: ["28%", "50%"],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center',
                        color: '#4c4a4a',

                    },
                    emphasis: {
                        scale: true,
                        scaleSize: 10,
                    },
                    labelLine: {
                        show: false
                    },
                    data: _this.dataList.contractStatusList,
                }]
            }
            this.myChart.setOption(option)
        },
        // 交易数据汇总订单数量明细
        initChart2() {
            var _this = this
            this.domIsExistence(this.myChart2)
            this.myChart2 = echarts.init(document.getElementById('ichart2'));
            let option = {
                tooltip: {
                    trigger: 'item',
                    enterable: true,
                    confine: true,
                    className: 'custom-tooltip-box',
                    formatter: function (params) {
                        // console.log('params',params)
                        let itemHtml = `
                          <div class='tooltip-box-title'>${params.name}：${params.value}家</div>
                          <div class='style-box'>
                            <div class='style-item'>
                                <span class='style-item-info'>客户名称</span>
                                <span class='style-item-info'>客户负责人</span>
                            </div>
                        `
                        params.data.clientList.forEach(res => {
                            let html = `
                            
                            <div class='style-item'>
                                <span class='style-item-info'>${res.clientName}</span>
                                <span class='style-item-info'>${res.responsiblePerson}</span>
                            </div>
                            `
                            itemHtml += html
                        })
                        return itemHtml + '</div>'
                    }
                },
                color: ['#FB6839', '#FFD644','#5A7EFF', '#5EEA96', '#9A66E4'],
                legend: {
                    selectedMode: false,
                    top: 'center',
                    right: '7%',
                    orient: 'vertical',
                    itemGap: this.nowSize(15),
                    itemWidth: this.nowSize(12),
                    itemHeight: this.nowSize(5),
                    lineHeight: this.nowSize(19),
                    formatter: name => {
                        let datas = _this.dataList.levelList
                        let values = ''
                        let ratio = ''
                        for (let i = 0, l = datas.length; i < l; i++) {
                            if (datas[i].name == name) {
                                ratio = datas[i].ratio;
                                values = datas[i].value;
                            }
                        }
                        // name =  this.LineFeedLabel(name,4)
                        return '{oneone|' + name + '}' + ' ' + '{threethree|' + values + '家}' + ' ' + '{twotwo|' + ratio + '%}';
                    },
                    textStyle: {
                        color: '#576276',
                        fontWeight: '400',
                        fontSize: this.nowSize(14),
                        padding: [0, 0, 0, this.nowSize(5)],
                        rich: {
                            // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
                            oneone: {
                                width: this.nowSize(70),
                                fontSize: this.nowSize(14),
                            },
                            twotwo: {
                                width: this.nowSize(45),
                                fontSize: this.nowSize(14),
                            },
                            threethree: {
                                width: this.nowSize(50),
                                fontSize: this.nowSize(14),
                            },
                        },
                    },
                },
                series: [{
                    name: 'Access From',
                    type: 'pie',
                    radius: ['35%', '65%'],
                    center: ["28%", "50%"],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                    },
                    emphasis: {
                        scale: true,
                        scaleSize: 10,
                    },
                    labelLine: {
                        show: false
                    },
                    data: _this.dataList.levelList,
                }]
            }
            this.myChart2.setOption(option)
        },
    },
};

</script>

<style lang="scss" scoped>
.ichart-box {
    width: 100%;
    display: flex;
    flex-direction: column;

    .ichart-box-item {
        width: 100%;
        height: 464px;
        padding: 22px 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 14px;
        margin-bottom: 30px;
    }

    .ichart-box-item:last-child {
        margin-bottom: unset;
    }

    .item-box-title {
        font-size: 20px;
        color: #222222;
        font-weight: bold;
    }

    .ichart {
        flex: 1;
        height: 0;
    }
}

@mixin scrollBarStyle() {
    &::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px #9b9ba3;
        background: rgba(190, 191, 192, 0.5);
    }
}

::v-deep {
    .custom-tooltip-box {
        // background-color: #141A3B !important;
        border-color: #DEE1EC !important;
        color: #ffffff !important;
        padding: 0px !important;
        .tooltip-box-title {
            font-size: 15px;
            background: #F1F3F8;
            color: #222222;
            font-weight: bold;
            // margin-bottom: 5px;
            padding: 3px 12px;
        }

        .style-box {
            // border: 1px solid #DEE1EC;
            border-radius: 4px;
            max-height: 300px;
            padding: 10px;
            overflow: auto;
            @include scrollBarStyle;

            .style-item {
                display: flex;
                flex-direction: row;
                align-items: center;

                .style-item-info {
                    width: 100px;
                    font-size: 12px;
                    padding: 5px 10px;
                    box-sizing: border-box;
                    text-align: center;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    color: #222222;
                }

                &:nth-child(2n-1) {
                    .style-item-info {
                        background: #F8FAFE;
                    }
                }
                &:first-child {
                    .style-item-info {
                        background: #E5EBF6;
                        font-weight: bold;
                        color: #222222;
                    }
                }

            }
        }

    }
}
</style>